<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <form class="layui-form" id="form">
        <input type="hidden" name="id" th:value="${goods==null? null:goods.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="商品名称"
                       class="layui-input" th:value="${goods==null? null:goods.name}">
            </div>
            <label class="layui-form-label">标题名</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="required" placeholder="商品标题"
                       class="layui-input" th:value="${goods==null? null:goods.title}">
            </div>
            <label class="layui-form-label">子标题名</label>
            <div class="layui-input-inline">
                <input type="text" name="subtitle" lay-verify="required" placeholder="商品子标题"
                       class="layui-input" th:value="${goods==null? null:goods.subtitle}">
            </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="text" name="price" lay-verify="number" placeholder="商品价格"
                   class="layui-input" th:value="${goods==null? null:goods.price}">
        </div>
        <label class="layui-form-label">库存</label>
        <div class="layui-input-inline">
            <input type="text" name="num" lay-verify="number" placeholder="商品库存"
                   class="layui-input" th:value="${goods==null? null:goods.num}">
        </div>
        <label class="layui-form-label">销量</label>
        <div class="layui-input-inline">
            <input type="text" name="salenum" lay-verify="number" placeholder="商品销量"
                   class="layui-input" th:value="${goods==null? null:goods.salenum}">
        </div>
    </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline">
                <select name="goodsTypeId">
                    <option th:each="type:${typeList}" th:value="${type.id}" th:text="${type.name}" th:selected="${goods==null? false:goods.goodsTypeId==type.id}"></option>
                </select>
            </div>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="state">
                    <option value="0" th:selected="${goods==null? false:goods.state==0}">准备上架</option>
                    <option value="1" th:selected="${goods==null? false:goods.state==1}">上架</option>
                    <option value="2" th:selected="${goods==null? false:goods.state==2}">下架</option>
                </select>
            </div>
            <label class="layui-form-label">封面图</label>
            <div class="layui-input-inline">
                <img alt="标题图片" src="wxui/images/goodsType/phone/daping.jpg" th:src="${goods==null? 'wxui/images/goodsType/phone/daping.jpg':goods.coverimg}" class="layui-nav-img" id="titleImg"/>
                <button type="button" class="layui-btn" id="uploadimg">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <input type="hidden" name="coverimg" th:value="${goods==null? 'wxui/images/goodsType/phone/daping.jpg':goods.coverimg}" id="imgsrc" />

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">轮播图</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo2"></div>
                    </blockquote>
                    <button type="button" class="layui-btn" id="test2">多图片上传</button>
                </div>
            </div>
        </div>

        <!-- 富文本编辑器 -->
        <div class="layui-form-item">
            <label class="layui-form-label">商品详情</label>
            <div class="layui-input-block">
                <div id="div1" class="toolbar"></div>
                <div id="div2" class="text"></div>
            </div>
        </div>
        <textarea id="text1" style="display: none" name="detail" th:text="${goods==null? null:goods.detail}"></textarea>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
                <a class="layui-btn" id="back" >返回</a>
            </div>
        </div>
    </form>



</div>
<script type="text/javascript">
    layui.use(['form', 'layer','upload'], function () {
        var form = layui.form;
        $ = layui.jquery;
        layer = layui.layer;
        upload = layui.upload;

        form.render(); //表格渲染

        var len = 0;
        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: 'upload/simpleupload'
            ,multiple: true
            ,number:5
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="50px" height="50px">');
                });
            }
            ,done: function(res){
                $("#demo2").append('<input type="hidden" name="carouselImgs" value="'+res.data+'">');
            }
        });

        /**
         * 富文本编辑器
         */
        var E = window.wangEditor;
        var editor = new E('#div1', '#div2');  //两个参数也可以传入 elem 对象，class 选择器
        var $text1 = $('#text1');
        editor.customConfig.onchange = function (html) {// 监控变化，同步更新到 textarea
            $text1.val(html);
        }
        editor.customConfig.uploadImgServer = 'upload/editorupload';
        editor.customConfig.uploadFileName = 'files'
        editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;//最大文件限制1M
        editor.customConfig.uploadImgMaxLength = 5;//最多一次上传5张图片
        editor.customConfig.customAlert = function (info) {
            layer.alert(info)
        }
        editor.create();
        reset();//初始化重置

        //重置
        $("#reset").click(function () {
            reset();
        })

        //重置方法
        function reset() {
            var content = $("#text1").text();
            editor.txt.html(content);
        }

        /*****************************
         * @Description: 文件上传
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/14
         *******************************/
        var uploadInst = upload.render({
            elem: '#uploadimg' //绑定元素
            , url: 'upload/simpleupload' //上传接口
            , done: function (res) {
                //上传完毕回调
                $("#titleImg").attr("src",res.data);
                $("#imgsrc").val(res.data);
            }, error: function () {

            }
        });



        /*****************************
         * @Description: 表单提交
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/14
         *******************************/
        form.on('submit(*)', function (data) {
            $.ajax({
                url: "goods/addOrEdit",
                dataType: "json",
                data: $("#form").serialize(),
                type: "post",
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg(data.msg+',页面稍后跳转', {icon: 1, anim: 1});
                        setTimeout('$("#content-body").load("/goods/goGoodsmgr")',3000);
                    } else {
                        layer.msg(data.msg, {icon: 2, anim: 6});
                    }
                }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        /**
         * 返回按钮
         * */
        $("#back").click(function () {
            $("#content-body").load("goods/goGoodsmgr");
        })

    });
</script>
</body>
</html>